<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
  <link rel="stylesheet" href="/ftl/css/bootstrap.min.css">
  <link rel="stylesheet" href="/ftl/css/laypage.css">

  <script src="/ftl/js/jquery/jquery.min.js"></script>
  <script src="/ftl/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
  <script src="/ftl/js/jquery.validation/1.14.0/messages_zh.min.js"></script>
  <style>
    input.error{
      border: 1px solid #E6594E;
    }
  </style>
</head>
<body>
<div class="container">

  <form id="editUserForm">
    <br/>
    <div class="form-group">
      <label for="username">用户名称：</label>
      <input type="text" class="form-control" id="username" name="username" value="${data.name}" placeholder="输入名称">
    </div>
    <div class="form-group">
      <label for="userage">用户年龄：</label>
      <input type="text" class="form-control" id="userage" name="userage" value="${data.age}" placeholder="输入年龄">
    </div>
    <div class="form-group">
      <button type="button" id="saveBtn" class="btn btn-success">提交</button>
      <button type="button" id="cancelBtn" class="btn btn-default">取消</button>
    </div>
  </form>
</div>

<script>
  // 编辑用户信息
  var editUser = function() {
    // 检查表单中的字段是否符合验证规则
    if (!check().form()) {
      return; // 如果验证不通过，直接返回，不执行后续操作
    }

    // 发送Ajax请求，更新用户信息
    $.ajax({
      type: "GET", // 请求类型为GET
      dataType: "json", // 请求的数据类型为JSON
      url: "/edit", // 请求的URL地址
      data: { // 传递给服务器的数据
        "id": ${data.id}, // 用户ID
        "name": $("#username").val(), // 用户名称
        "age": $("#userage").val() // 用户年龄
      },
      success: function(msg) {
        // 更新成功后，模拟点击取消按钮，关闭弹出层
        $('#cancelBtn').click();
      }
    });
  }

  // 当保存按钮被点击时，调用editUser函数
  $('#saveBtn').on('click', function() {
    editUser();
  });

  // 当取消按钮被点击时，关闭当前的弹出层
  $('#cancelBtn').on('click', function() {
    var index = parent.layer.getFrameIndex(window.name); // 获取当前弹出层的索引
    parent.getUserPageList(); // 重新加载父页面中的用户列表
    parent.layer.close(index); // 关闭弹出层
  });

  // 校验字段是否正确
  function check() {
    // 返回一个validate对象，该对象包含表单验证的规则和消息
    return $("#editUserForm").validate({
      rules: { // 验证规则
        username: {
          required: true // 用户名字段为必填项
        },
        userage: {
          required: true // 用户年龄字段为必填项
        }
      },
      messages: { // 验证失败时的提示消息
        username: {
          required: "" // 用户名字段为空时，提示为空（可根据需要修改）
        },
        userage: {
          required: "" // 用户年龄字段为空时，提示为空（可根据需要修改）
        }
      }
    });
  }

</script>

</body>